<template>
  <div>
    <!-- <div class="line-box">
      <div style="height: 30px">
        <div class="lines"></div>
      </div>
      <linea></linea>
      <linea></linea>
      <linea></linea>
      <linea></linea>
      <linea></linea>
    </div> -->
    <div style="margin-bottom: 40px">
      <lineb :warn="true"></lineb>
      <lineb></lineb>
    </div>
    <linea></linea>
    <linea></linea>
    <linea></linea>
    <linea></linea>
    <linea></linea>
    <linea></linea>
    <linea></linea>
    <linea></linea>
    {{ val }}
    <button @click="total = total + 1">ss</button>
    <!-- {{ radio }}
    <el-radio-group v-model="radio">
      <el-radio :label="true">是</el-radio>
      <el-radio :label="false">否</el-radio>
    </el-radio-group> -->

    <!-- <div v-for="(item, index) in arr" :key="index">
      <group v-model="item.judge">
        <AcheckBox :label="0">是</AcheckBox>
        <AcheckBox :label="1">否</AcheckBox>
      </group>
    </div>
    {{ radio }}
    <el-form>
      <el-input v-model="form.name" placeholder="输入名字"></el-input>
    </el-form>
    <el-button @click="get_table">搜索</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="序号" width="180"> </el-table-column>
      <el-table-column prop="name" label="名字" width="180"> </el-table-column>
      <el-table-column prop="price" label="价格" width="180"> </el-table-column>
      <el-table-column
        prop="createdAt"
        :formatter="trans_data"
        label="创建时间"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="updatedAt"
        :formatter="trans_data"
        label="更新时间"
      >
      </el-table-column>
    </el-table>
    <c-page :total="total" @getPageObj="getPageObj"></c-page> -->
  </div>
</template>

<script>
import cTable from "./table.vue";
import cPage from "./page.vue";
import axios from "axios";
import dayjs from "dayjs";
import AcheckBox from "./checkbox.vue";
import group from "./group.vue";
import linea from "./line.vue";
import lineb from "./lineb.vue";
export default {
  components: {
    cTable,
    cPage,
    AcheckBox,
    group,
    linea,
    lineb,
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      total: 0,
      radio: 0,
      arr: [
        {
          judge: false,
        },
        {
          judge: false,
        },
      ],
      form: {
        name: "1",
        age: "2",
        sex: "3",
      },
      page_obj: {},
    };
  },
  mounted() {},
  methods: {
    async get_table() {
      let { data } = await axios({
        url: "http://25q686n876.qicp.vip:44289/table/select",
        method: "POST",
        data: {
          ...this.page_obj,
          ...this.form,
        },
      });
      if (data.code === 0) {
        this.tableData = data.data_json;
        this.total = data.total;
      } else {
        this.$message.error(data.msg);
      }
    },
    getPageObj(page_obj) {
      console.log(page_obj);
      this.page_obj = page_obj;
      this.get_table();
    },
    trans_data(row, column, cellValue, index) {
      return dayjs(cellValue).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  computed: {
    val: function ({ total, radio }) {
      return total + radio;
    },
  },
};
</script>

<style lang="scss">
.line-box {
  width: 200px;
  position: relative;
}

.lines {
  margin-top: 5px;
  height: 35px;
  position: absolute;
  left: 5px;
  border-left: 2px solid #e4e7ed;
}
</style>
